<template>
  <div class="input-with-tag">
    <!-- 上方输入框（带标题） -->
    <div class="input-group">
      <span class="input-title">差旅人员</span>
      <el-input
        v-model="input1"
        @keyup.enter.native="handleInputConfirm"
      >
        <!-- 插入标签到输入框内部左侧 -->
        <template #prefix>
          <el-tag
            v-if="tags.length > 0"
            closable
            type="info"
            size="small"
            @close="handleClose(i)"
            class="inner-tag"
            :key="i"
            v-for="(item,i) in tags"
          >
            {{item}}
          </el-tag>
        </template>
      </el-input>
    </div>

  </div>
</template>
<script>

  export default {
    name:"test1",
    data(){
      return {
        input1: '',
        input2: '',
        tagVisible: true,
        tags: [],
      };
    },

    methods:{
      handleClose(index) {
        this.tags.splice(index, 1)
      },
      handleInputConfirm(){
        this.tags.push(this.input1)
        this.input1 = ''
      }
    },

  }
</script>

<style scoped>
/* 标题样式（图片中的"差旅人员"） */
.input-title {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #000;
}

/* 标签在输入框内的样式 */
.inner-tag {
  margin-right: 8px;
  background-color: #e6f7ff; /* 浅蓝色背景 */
  border-color: #91d5ff; /* 浅蓝色边框 */
}

</style>
